<template>
  <div class="dashboard">
    <div class="page-header">
      <h2>仪表盘</h2>
      <p>智慧医疗管理系统数据概览</p>
    </div>

    <!-- 数据卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="card-container stat-card">
          <div class="stat-content">
            <div class="stat-number">128</div>
            <div class="stat-label">轮播图总数</div>
          </div>
          <div class="stat-icon">
            <el-icon><Picture /></el-icon>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card-container stat-card">
          <div class="stat-content">
            <div class="stat-number">1,256</div>
            <div class="stat-label">用户总数</div>
          </div>
          <div class="stat-icon">
            <el-icon><User /></el-icon>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card-container stat-card">
          <div class="stat-content">
            <div class="stat-number">2,138</div>
            <div class="stat-label">订单总数</div>
          </div>
          <div class="stat-icon">
            <el-icon><Document /></el-icon>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card-container stat-card">
          <div class="stat-content">
            <div class="stat-number">86</div>
            <div class="stat-label">医疗项目</div>
          </div>
          <div class="stat-icon">
            <el-icon><Folder /></el-icon>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 快捷操作 -->
    <div class="card-container" style="margin-top: 20px;">
      <div class="card-header">
        <h3>快捷操作</h3>
      </div>
      <div class="quick-actions">
        <el-button type="primary" @click="$router.push('/content/carousel')">
          <el-icon><Plus /></el-icon>
          新增轮播图
        </el-button>
        <el-button type="success">
          <el-icon><Edit /></el-icon>
          编辑内容
        </el-button>
        <el-button type="warning">
          <el-icon><View /></el-icon>
          查看报表
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Picture, User, Document, Folder, Plus, Edit, View } from '@element-plus/icons-vue'

/**
 * 仪表盘页面
 * 展示系统概览数据和快捷操作
 */
</script>

<style lang="scss" scoped>
.dashboard {
  .page-header {
    margin-bottom: 24px;
    
    h2 {
      margin: 0 0 8px 0;
      font-size: 24px;
      font-weight: 600;
      color: $text-color-primary;
    }
    
    p {
      margin: 0;
      color: $text-color-regular;
      font-size: 14px;
    }
  }

  .stat-card {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .stat-content {
      .stat-number {
        font-size: 32px;
        font-weight: 700;
        color: $primary-color;
        line-height: 1;
        margin-bottom: 8px;
      }

      .stat-label {
        font-size: 14px;
        color: $text-color-secondary;
      }
    }

    .stat-icon {
      font-size: 48px;
      color: $primary-color;
      opacity: 0.2;
    }
  }

  .card-header {
    padding: 20px;
    border-bottom: 1px solid $border-color-lighter;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: $text-color-primary;
    }
  }

  .quick-actions {
    padding: 20px;
    display: flex;
    gap: 12px;
  }
}
</style> 